<template>
  <div class="list-wrapper training-list-wrapper">
    <div class="list-top">
        <el-date-picker size="small" v-model="time" type="daterange" placeholder="请选择时间" @change="handleChange"></el-date-picker>
        <el-button type="primary" size="small" @click="download">下载</el-button>
    </div>
    <!-- <table class="list-table" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>课程编号</th>
          <th>课程名称</th>
          <th>开课时间</th>
          <th>结课时间</th>
          <th>教室</th>
          <th>主讲培训师</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.code}}</td>
          <td>{{item.name}}</td>
          <td>{{item.startdate}}</td>
          <td>{{item.enddate}}</td>
          <td>{{item.classroom}}</td>
          <td>{{item.trainer_name}}</td>
          <td>{{item.state}}</td>
        </tr>
      </tbody>
    </table> -->
    <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'total_money', order: 'descending'}">
      <el-table-column type="index" width="70"></el-table-column>
    <el-table-column prop="number" label="员工编号" sortable>
    </el-table-column>
    <el-table-column prop="name" label="姓名">
    </el-table-column>
    <el-table-column prop="class_hour" label="课时" sortable>
    </el-table-column>
    <el-table-column prop="teach_money" label="单位课酬" sortable>
    </el-table-column>
    <el-table-column prop="total_money" label="总课酬" sortable>
    </el-table-column>
  </el-table>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: "",

      tableData: []
    };
  },
  methods: {
    fetchData() {
      let data = {
        time: this.time,
        page: this.page
      };

      this.apiPost("Operation/staffCourseMoney", data).then(res => {
        this.tableData = res;
      });
    },
    handleChange() {
      this.fetchData();
    },

    download(id) {
      let data = {
        time: this.time,
        page: this.page
      };
      this.apiPost("Operation/staffCourseMoney", data).then(res => {
        res.forEach((item,index)=>{
          item.index = index+1;
        })
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['序号','员工编号', '姓名', '课时', '单位课酬', '总课酬']
          const filterVal = ['index','number', 'name', 'class_hour', 'teach_money', 'total_money']
          const data = this.formatJson(filterVal, res)
          export_json_to_excel(tHeader, data, '培训师课酬统计')
        })
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  },
  created() {
    this.fetchData();
  }
};
</script>
<style scoped>

</style>
